<template>
  <!--banner轮播-->
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="banner in slideList" :key="banner.key">
        <img :src="banner.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.min.js"
import "swiper/swiper-bundle.min.css"
export default {
  name: "Swiper",
  props: ["slideList"],
  methods: {
    mySwiper () {
      // 打包好以后,多个组件中的new Swiper会同时起作用
      //  但是每一个swiper的容器都是`swiper-container`,所以我们实例化Swiper的时候不能使用容器的类名,而是要使用ref获取到对应的容器才可以
      new Swiper(this.$refs.swiper, {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    }
  },
  watch: {
    slideList: {
      //立即监听
      immediate: true,//这里的立即监听针对的是floor组件的轮播
      handler () {
        //立即监听时Swiper更新了一次数据，下方数据请求完毕时Swiper又更新了一次数据，会造成闪屏问题，所以这里判断slideList中是否有数据，如果没有则return，就不会执行第二次new Swiper
        if (this.slideList.length <= 0) return
        this.$nextTick(() => {
          this.mySwiper()
        })
      }
    }
  }
}
</script>

<style>

</style>